<template>
  <div>
    <input type="checkbox" :checked="allCheck" @change="allOrNone">
    <span>已完成{{ done }}/全部{{ count }}</span>
    <button @click="delDone">清除已完成的任务</button>
  </div>
</template>

<script>
export default {
  name: 'TodoFooter',
  props: ['todoList'],
  computed: {
    done() {
      return this.todoList.reduce((pre, cur) => pre + (cur.completed ? 1 : 0), 0)
    },
    count() {
      return this.todoList.length
    },
    allCheck: {
      get() {
        return this.count === this.done && this.count > 0
      }
    }
  },
  methods: {
    allOrNone(e) {
      // this.chooseAll(e.target.checked)
      this.$emit('chooseAll', e.target.checked)
    },
    delDone() {
      // this.delCompleted()
      this.$emit('delCompleted')
    }
  }
}
</script>